<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/rem_750.js"></script>
		<script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
	</head>
	<body>

		<div class="myCont">
			<div class="yuyuetime">
				<div class="data_times">
					<!-- <p>9月28日</p> -->
					<!-- <div class="sanjiao"></div> -->
					<select class="select" style="border: 0;color: #0075c1;">
						<option>请选择</option>
						<!-- <option value ="2">2</option> -->
						<!-- <option value ="3">3</option> -->
					</select>
				</div>
				<!-- 场次，状态 -->
				<div class="condition">
					<span>场次</span>
					<span>状态</span>
				</div>
				<!-- 时间的状态内容 -->
				<div class="data_content">
					<div class="data_item">
						<span>-</span>
						<div class="item_yuyue">-</div>
					</div>
					<!--  -->
					<div class="data_item">
						<span>-</span>
						<div class="item_yuyue">-</div>
					</div>
					<!--  -->
					<div class="data_item">
						<span>-</span>
						<div class="item_yuyue">-</div>
					</div>
				</div>
				<!-- 最下面的文字说明 -->
				<div class="data_txt">
					<p><span>&#9733;</span>一个手机号，一天只能预约一场。</p>
				</div>
			</div>
			<!-- 弹窗 -->
			<div class="alert_wrapper">
				<div class="alert_content">

				</div>
				<div class="alert_btn alert_btn_cancel">
					取消
				</div>
				<div class="alert_btn alert_btn_confirm">
					确定
				</div>
			</div>
		</div>
		<!--  -->
		<script src="js/jquery.js"></script>
		<script src="js/util.js"></script>
		<script src="js/api.js"></script>
		<script type="text/javascript">
			$(function() {
				// 拿到上一页面传过来的数据地址
				var access_token = getQueryString("access_token");
				console.log(access_token)
				// 检测是否有传过来数据，没有则跳回登录界面
				if (!access_token) {
					alert("请先登录")
					location.href = "./index.html";
				}
				// 确定，取消按钮
				var btn_cancel = $(".alert_btn_cancel");
				btn_cancel.on("click", function() {
					$(".alert_wrapper").hide(500)
				});
				// 给预约场次添加时间(使用事件委托)
				var data_content = $(".data_content");
				var alert_wrapper = $(".alert_wrapper");
				var isclick = true;
				data_content.on("click", "span,.item_yuyue", function(event) {
					// console.log($(event.target).text().trim())
					// trim()方法去除前后的空格
					var text = $(event.target).text();
					console.log(text)
					if (text === "-") {
						console.log(text)
						return
					}
					if (!isclick) {
						return;
					}
					isclick = false;
					console.log($(event.target).parent().data('index'))
					// console.log($(event.target).parent().attr("data-index"))
					var day_time = $(".select").attr("data_time_day");
					var index = $(event.target).parent().attr("data-index");
					var show_id = $(event.target).parent().attr("data-show_id");
					var t = $(".data_item").eq(index).find("span").text();
					// 判断是否预约场次
					// var isbook = prompt('是否预约', "日期:" + day_time + "场次" + t, ['取消', '确认'], function(e) {
					// 	e.index
					// }, 'div')
					var isbook = "温馨提示:是否预约" + "日期:" + day_time + "场次" + t;
					alert_wrapper.find(".alert_content").html(isbook);
					alert_wrapper.css("display", "flex");
					var btn_confirm = $(".alert_btn_confirm");
					// 确定按钮
					btn_confirm.one("click", function() {
						// 数据埋点，记录用户登录点击事件
						var mtaObj = {
							day_time: day_time,
							show_id: show_id
						}
						MtaH5.clickStat('yonghuguiji',{'ldbook':JSON.stringify(mtaObj)})
						// 确认这一天
						// let dayUrl = "https://gzflower.bluej.cn/index/choose/bookday"
						$.ajax({
							method: "post",
							url: api.bookday,
							timeout: 5000,
							data: {
								access_token: access_token,
								day_time: day_time,
								show_id: show_id
							},
							success: function(res) {
								console.log(res)
								var result = res.res;
								// 重复预约，提醒用户预约其他天
								if (result == 0) {
									// alert(res.msg);
									isclick = true;
									btn_cancel.hide();
									btn_confirm.hide();
									alert_wrapper.find(".alert_content").text(res.msg);
									setTimeout(function() {
										alert_wrapper.hide();
										btn_cancel.show();
										btn_confirm.show();
									}, 1500);
								}
								if (result == 1) {
									var show_id = res.data.show_id;
									var day_time = res.data.day_time;
									var uname = res.data.uname;
									// console.log("uname",uname)
									uname = escape(uname)
									location.href =
										`./identity.html?show_id=${show_id}&day_time=${day_time}&uname=${uname}&access_token=${access_token}`;
								}
							},
							error: function() {
								swal("数据请求异常")
							}
						})
					});
				})

				// 给下拉框绑定事件
				var select = $(".select");
				select.on("change", function(event) {
					console.log(event)
					// 如何知道用户选择哪一个
					var sel_value = event.target.value;
					if (sel_value) {
						// var day_time = $(event.target).find("option").filter(function(index){
						// 	return index == sel_value;
						// }).text();
						var day_time = $(event.target).find("option").eq(sel_value).text();
						$(event.target).attr("data_time_day", day_time)
						// console.log(day_time)

						// 请求数据
						$.ajax({
							method: "post",
							url: api.chooseday,
							timeout: 5000,
							data: {
								access_token: access_token,
								day_time: day_time,
								// show_id:show_id
							},
							success: function(res) {
								console.log(res)
								var dayInfo = res.data.dayInfo;
								var data_item = $(".data_item");
								// 先重置文本
								data_item
									.removeAttr("data-index data-show_id")
									.find("span")
									.text("-")
									.siblings(".item_yuyue")
									.text("-");
								// 
								dayInfo.forEach(function(ele, i) {
									// 用number转为数字方便加减
									var canbook = Number(ele.balance) < Number(ele.day_max);
									var book_txt = canbook ? "可预约" : "已约满";
									data_item
										.eq(i)
										.attr("data-index", i)
										.attr("data-show_id", ele.show_id)
										.find("span")
										.text(ele.show_name)
										.siblings(".item_yuyue")
										.text(book_txt);
								})
							},
							error: function() {
								swal("数据请求异常")
							}
						})
					} else {
						alert("请重新选择日期")
					}
				})

				// let yuyueUrl = "https://gzflower.bluej.cn/index/choose/chooselist";
				// 获取预约列表
				$.ajax({
					method: "post",
					url: api.chooselist,
					data: {
						access_token: access_token,
					},
					dataType: "json",
					timeout: 3000,
					success: function(result) {
						console.log("成功")
						console.log(result)
						var list = result.data.list;
						var select = $(".select");
						var str = "";
						list.forEach(function(ele, index) {
							// var index = 1;
							str += `<option value =${index+1}>${ele.day_time}</option>`
						})
						select.append(str);
					},
					error: function() {
						swal("数据请求异常")
					}
				})

			})
		</script>
		<!--  -->
		<script>
			var _mtac = {};
			(function() {
				var mta = document.createElement("script");
				mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
				mta.setAttribute("name", "MTAH5");
				mta.setAttribute("sid", "500712136");
				mta.setAttribute("cid", "500712137");
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(mta, s);
			})();
		</script>
	</body>
</html>
